<template>
  <el-scrollbar class="zw-nav-menu">
    <el-collapse accordion v-model="state.activeCollapse" @change="onTabChange">
      <el-collapse-item v-for="(item1, index1) in state.menuList" :key="`first${index1}`" :name="item1.path" class="menu_item">
        <template #title>
          <div class="nav-item">
            <img :src="imgList[+index1].url" class="nav-icon" />
            <span class="nav-name">{{ item1.name }}</span>
          </div>
        </template>
        <div class="sidebar_container">
          <div class="sidebar_main" v-for="(item2, index2) in item1.children" :key="`second${index2}`">
            <p class="item_title">{{ item2.name }}</p>
            <div class="item_con">
              <div v-for="(item3, index3) in item2.children" :key="`thirdly${index3}`" @click="onShowPage(item1, item2, item3)" class="item_text">
                <span class="text" :class="[state.currentRoute.includes(`${item1.path}/${item2.path}/${item3.path}`) ? 'active_color' : '']">{{ item3.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-scrollbar>
</template>

<script setup lang="ts">
  import { reactive, watch } from 'vue'
  import router from '@/router'
  import imgUrl from '@/assets/imgs/logo/ai_log.png'
  import imgUrl2 from '@/assets/imgs/logo/SMS1.png'

  const state: any = reactive({
    activeCollapse: '',
    currentRoute: '',
    menuList: []
  })
  const imgList = [{ url: imgUrl }, { url: imgUrl2 }]

  const onTabChange: any = (n: string) => {
    state.activeCollapse = n
  }

  const onShowPage = (item1: any, item2: any, item3: any) => {
    router.push({ path: `${item1.path}/${item2.path}/${item3.path}` })
  }

  watch(router.currentRoute, (val) => {
    if (state.menuList.length == 0) {
      const menuList: any = router.options.routes.find((item: any) => item.name === 'root')?.children
      const aCollapse = menuList.find((item: any) => val.path.includes(item.path))
      state.menuList = [aCollapse]
      state.activeCollapse = aCollapse?.path || ''
    }

    state.currentRoute = val.path || ''
  })
</script>

<style lang="scss" scoped>
  .zw-nav-menu {
    flex: 0 0 260px;
    width: 260px;
    height: calc(100vh - 60px);
    background-color: #fff;

    .menu_item {
      min-height: 50px;
      :deep(.el-collapse-item__header) {
        height: 100%;
        padding: 0 6px 0 16px;
        border-bottom: 0;
        &:hover {
          background: #fffaf9;
        }
      }
      :deep(.el-collapse-item__header.is-active) {
        .el-icon {
          color: #ff6b00;
        }
        .nav-item {
          font-weight: 500;
          color: #ff6b00;
        }
      }
      :deep(.el-collapse-item__content) {
        padding-bottom: 0;
      }
      .nav-item {
        display: flex;
        align-items: center;
        height: 60px;
        font-size: 16px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #33302d;
        .nav-icon {
          width: 20px;
          height: auto;
          margin-right: 12px;
        }
        .nav-name {
          flex: auto;
        }
      }
      .sidebar_container {
        margin: 0px 10px 10px;
        background: #f9f9f9;
        padding: 15px 10px 15px 20px;
        box-sizing: border-box;

        .sidebar_main {
          margin-bottom: 15px;
          padding-bottom: 15px;
          border-bottom: 1px solid #eaeaea;
          &:last-child {
            border-bottom: 0;
            padding-bottom: 0;
            margin-bottom: 0;
          }
        }
        .item_title {
          font-size: 12px;
          font-family: STHeitiSC-Light, STHeitiSC;
          font-weight: 300;
          color: #969696;
          line-height: 15px;
        }
        .item_con {
          margin-left: -4px;
          .item_text {
            display: inline-block;
            width: 50%;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #33302d;
            line-height: 14px;
            margin-top: 20px;
            vertical-align: top;
            .text {
              cursor: pointer;
              display: inline-block;
              border-radius: 2px;
              padding: 2px 4px;
              &:hover {
                background: #fff1ed;
              }
            }
          }
        }
      }
    }
    .active_color {
      display: inline-block;
      color: #ff6b00;
      background: #fff1ed;
    }
  }
</style>
